<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-19 14:01:10
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-23 20:04:58
-->

<template>
    <div class="customerAll" v-if="showMine">
        <div class="allHeadvue">
            <div>
                <!-- 搜索 -->
                <allheadVue />
            </div>
            <div>
                <!-- 按钮 -->
                <allBtnVue @openDialogFrom="openDialogFrom" @shareCustomer="shareCustomer" />
            </div>
        </div>
        <div class="gap"></div>
        <div class="allTableVueStylus">
            <!-- 表格 -->
            <MineTable :data="data" :total="total" :page="page" :loadData="loadData" :pageSize="pageSize"
                @followUp="followUp" @edit="edit" @view="view" @del="del" />
            <div class="gap"></div>
        </div>
        <!-- 弹框 -->
        <!-- 增加表单 -->
        <el-dialog v-model="adddialogVisible" :show-close="false" :close-on-click-modal="false">
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                    <span :id="titleId" :class="titleClass">新增客户</span>
                    <el-icon @click="close" class="closestylus">
                        <Close />
                    </el-icon>
                </div>
            </template>
            <allAddVue :setDialogVisible="setDialogVisible" @colse-dialog-from="colseDialogFrom" />
        </el-dialog>
        <!-- 分享 -->
        <el-dialog v-model="sharddialogVisible" :show-close="false" :close-on-click-modal="false" id="shard"
            style="width:20%">
            <template #header="{ close, titleId }" style="100%">
                <div class="my-header">
                    <span :id="titleId">分享</span>
                    <el-icon @click="close" class="closestylus">
                        <Close />
                    </el-icon>
                </div>
            </template>
            <QRCode class="QRCode"> </QRCode>
        </el-dialog>
        <!-- 跟进 -->
        <el-dialog v-model="followUpdialogVisible" :show-close="false" :close-on-click-modal="false">
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                    <span :id="titleId" :class="titleClass">跟进客户</span>
                    <el-icon @click="close" class="closestylus">
                        <Close />
                    </el-icon>
                </div>
            </template>
            <mineFollowUpVue :setDialogVisible="setDialogVisible" @colse-dialog-from="colseDialogFrom"
                :followId="followId" />
        </el-dialog>
        <!-- 编辑 -->
        <el-dialog v-model="editdialogVisible" :show-close="false" :close-on-click-modal="false">
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                    <span :id="titleId" :class="titleClass">编辑客户</span>
                    <el-icon @click="close" class="closestylus">
                        <Close />
                    </el-icon>
                </div>
            </template>
            <MineEditVue :setDialogVisible="setDialogVisible" @colse-dialog-from="colseDialogFrom" :followId="followId" />
        </el-dialog>
    </div>
    <div v-else class="customerinfo">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <div class="colorBar"></div>
                    <div>客户信息</div>
                </div>
            </template>
            <mineMessageVue :showMessageId="showMessageId" />
        </el-card>
        <el-card class="box-card">
            <template #header>
                <el-button type="primary" size="default" @click="followupinformation('followup')">跟进信息</el-button>
                <el-button type="primary" size="default" @click="contractinformation('contract')">合同信息</el-button>
                <el-button type="primary" size="default" @click="paymentinformation('payment')">回款信息</el-button>
                <el-button type="primary" size="default" @click="vestingrecord('vesting')">归属记录</el-button>
                <el-button type="primary" size="default" @click="attachmentinformation('attachmenti')">附件信息</el-button>
                <el-button type="primary" size="default" @click="operationlog('log')">操作日志</el-button>

            </template>
            <component :is="typeInfo" :message="message" @dialogtrue="dialogtrue" @dialogtrue2="dialogtrue2"></component>
            <el-dialog v-model="contractdialogVisible" :show-close="false" :close-on-click-modal="false">
                <template #header="{ close, titleId, titleClass }">
                    <div class="my-header">
                        <span :id="titleId" :class="titleClass">查看合同</span>
                        <el-icon @click="close" class="closestylus">
                            <Close />
                        </el-icon>
                    </div>
                </template>
                <el-card class="box-card">
                    <template #header>
                        <el-button type="primary" size="default"
                            @click="contractmessage('contractmessage')">合同信息</el-button>
                        <el-button type="primary" size="default" @click="paymessage('paymessage')">回款信息</el-button>
                    </template>
                    <component :is="typeInfoMessage" :message="message" @payadd="payadd"></component>
                </el-card>

            </el-dialog>
        </el-card>
    </div>
    <!-- 合同和新增的页面 -->
</template>

<script setup lang="ts">
import allAddVue from "./ui/mineAdd.vue";
import allBtnVue from "./ui/mineBtn.vue";
import allheadVue from "./ui/minehead.vue";
import MineEditVue from "./ui/mineEdit.vue";
import MineTable from "./ui/mineTable.vue";
import mineFollowUpVue from "./ui/mineFollowUp.vue";
import mineMessageVue from "./ui/mineMessage.vue";
import attachmentinformationVue from "./ui/attachmentinformation.vue";
import Followupinformation from "./ui/followupinformation.vue";
import paymentinformationVue from "./ui/paymentinformation.vue";
import operationlogVue from "./ui/operationlog.vue";
import vestingrecordVue from "./ui/vestingrecord.vue";
import contractinformationVue from "./ui/contractinformation.vue";
import Contractin from "./ui/contractin.vue";
import paymessageVue from "./ui/paymessage.vue";
import payaddVue from "./ui/payadd.vue";



import { ElButton, ElDialog } from 'element-plus'
import { userDialogVisible, useCustomerList } from './minehooks'
import { useRoute, useRouter } from "vue-router";
import { computed, reactive, ref, watch } from "vue";
import { userCustomerfollowMessageApi, userCustomerContractinMessageApi, userCustomerDelApi } from "@/services/customer"
import { deepCopy } from "@/utils/Tools/deepCopy";
import usePayStore from "@/stores/pay";
import usePayMESStore from "@/stores/paymes";
import useVistStore from "@/stores/vest";
import useAttaStore from "@/stores/atta";
import useLogStore from "@/stores/log";






// 设置路由
const InitRoute = computed(() => {
    return route.path ?? '/customer/mine'
})

const PayStore = usePayStore()
const PayMESStore = usePayMESStore()
const PayvistStore = useVistStore()
const PayattaStore = useAttaStore()
const PaylogStore = useLogStore()
const route = useRoute()
const router = useRouter()


interface IProps {
    page: number
    pageSize: number
}
const props = withDefaults(defineProps<IProps>(), {
    page: 1,
    pageSize: 10
})

const [adddialogVisible, sharddialogVisible, followUpdialogVisible, editdialogVisible, contractdialogVisible, setDialogVisible] = userDialogVisible()
const [data, total, loadData] = useCustomerList(props.page, route.query as object, props.pageSize)
const openDialogFrom = (value: boolean, item: number) => {
    if (item === 1) {
        adddialogVisible.value = value
    }

};
const colseDialogFrom = (value: boolean) => {
    setDialogVisible(value)
}
//分享
const shareCustomer = (value: boolean, item: number) => {
    if (item === 2) {
        sharddialogVisible.value = value
    }
}
// 跟进
const followId = ref(0)
watch(followUpdialogVisible, val => {
    if (!val) {
        followId.value = 0
    }
})
const followUp = async (customerId: number, item: number) => {
    followId.value = customerId
    if (item === 3) {
        followUpdialogVisible.value = true
    }

}
//编辑
const edit = (customerId: number, item: number) => {
    followId.value = customerId
    if (item === 4) {
        editdialogVisible.value = true
    }
};
//查看
const showMine = ref(true)
const showMessageId = ref(0)
let messageArray = reactive<any>({})
const message = ref()
//视图
const view = async (customerId: number) => {
    showMine.value = false
    showMessageId.value = customerId
    let followret = await userCustomerfollowMessageApi(showMessageId.value)
    messageArray = deepCopy(followret.data)
    message.value = messageArray.followmessage
};
//六大按钮
const clickedButtonType = ref("");
const followupinformation = async (value: string) => {
    clickedButtonType.value = value;
    let followret = await userCustomerfollowMessageApi(showMessageId.value)
    messageArray = deepCopy(followret.data)
    message.value = messageArray.followmessage
}
const contractinformation = async (value: string) => {
    clickedButtonType.value = value;
    let contractinret = await userCustomerContractinMessageApi(showMessageId.value)
    messageArray.value = {}
    message.value = []
    messageArray = deepCopy(contractinret.data)
    message.value = messageArray.contractinmessage
}
const paymentinformation = async (value: string) => {
    clickedButtonType.value = value;
    let retback = await PayStore.USEPAYACTION(showMessageId.value)
    let retmes = await PayMESStore.USEPAYMESACTION(showMessageId.value)
}
const vestingrecord = async (value: string) => {
    clickedButtonType.value = value;
    let vest = await PayvistStore.USEVISTACTION(showMessageId.value)
}
const attachmentinformation = async (value: string) => {
    clickedButtonType.value = value;
    let atta = await PayattaStore.USEPATTACTION(showMessageId.value)
}
const operationlog = async (value: string) => {
    clickedButtonType.value = value;
    let log = await PaylogStore.USEPLOGCTION(showMessageId.value)
}
const typeInfo = computed(() => {
    switch (clickedButtonType.value) {
        case "followup":
            return Followupinformation;
        case "contract":
            return contractinformationVue;
        case "payment":
            return paymentinformationVue;
        case "vesting":
            return vestingrecordVue;
        case "attachmenti":
            return attachmentinformationVue;
        case "log":
            return operationlogVue;
        default:
            return Followupinformation;
    }
})
//删除
const del = async (customerId: number) => {
    let ret = await userCustomerDelApi(customerId)
    console.log("结束了-------", ret.data)
};

const typeInfoMessage = computed(() => {
    switch (clickedButtonType.value) {
        case "contractmessage":
            return Contractin;
        case "paymessage":
            return paymessageVue;
        case "payaddvue":
            return payaddVue;
        default:
            return Contractin;
    }
})

//合同和新增
const dialogtrue = (value: boolean) => {
    contractdialogVisible.value = value
}
const dialogtrue2 = (value: boolean) => {
    contractdialogVisible.value = value
}

const contractmessage = async (value: string) => {
    clickedButtonType.value = value;
    let contractinret = await userCustomerContractinMessageApi(showMessageId.value)
    messageArray.value = {}
    message.value = []
    messageArray = deepCopy(contractinret.data)
    message.value = messageArray.contractinmessage
}

const paymessage = async (value: string) => {
    clickedButtonType.value = value;
    let contractinret = await userCustomerContractinMessageApi(showMessageId.value)
    messageArray.value = {}
    message.value = []
    messageArray = deepCopy(contractinret.data)
    message.value = messageArray.contractinmessage
    let retback = await PayStore.USEPAYACTION(showMessageId.value)
    let retmes = await PayMESStore.USEPAYMESACTION(showMessageId.value)

}
const payadd = (value: string) => {
    clickedButtonType.value = value;
}
</script>

<style lang="scss" scoped>
.customerAll {
    width: 100%;
    height: 100%;
    border-radius: 20px;



    .allHeadvue {
        margin-bottom: 5px;
        background-color: red;
        border-radius: 10px;

        div {
            height: 60px;
            background-color: #fff;
        }

    }

    .gap {
        height: 10px;
        background-color: #f2f2f2;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border: 0;
    }

    .allTableVueStylus {
        width: 100%;
        margin-top: 5px;
        border-radius: 10px;
    }


}



.el-overlay {
    .el-overlay-dialog {


        .el-dialog {
            .el-dialog__body {
                .QRCode {
                    width: 100px;
                    height: 100px;
                    margin: auto;

                }
            }



            .el-dialog__header {
                width: 100%;
                margin: 0;
                padding: 0;
                height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: red;

                .my-header {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    text-align: center;

                    span {
                        width: 100%;
                        text-align: center;
                    }

                    i {
                        margin-right: 10px;
                    }



                }
            }


        }
    }

}



.closestylus {
    cursor: pointer;
}

.el-card {
    margin-bottom: 20px;


    .el-card__header {
        border-bottom: 0;
        padding: 0;
        margin-left: 10px;
        margin-top: 10px;

        .card-header {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .colorBar {
                width: 4px;
                height: 15px;
                background-color: #367eea;
                margin-right: 10px;
            }
        }


    }

}

.customerinfo {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .el-card {
        width: 100%;
        height: 48%;
        display: flex;
        flex-direction: column;
        overflow-y: auto;

        .card-header {
            height: 40px;
            /* Adjust the height of the header as needed */
            background-color: #f0f0f0;
            /* Set the background color as needed */
            display: flex;
            align-items: center;
            padding: 0 15px;
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .el-card__body {
            background-color: red;
            flex: 1;
            overflow: auto;
        }

    }
}
</style>

<style>
.customerAll .el-overlay .el-overlay-dialog .el-dialog .el-dialog__header {
    background-color: skyblue;
    margin: 0;

}
</style>